<template>
	<view class="message-center">
		<!-- 	<view class="page-header">
			<text class="page-title">消息中心</text>
		</view> -->

		<view class="message-list">
			<view v-for="(item, index) in messageList" :key="index" class="message-item"
				:class="{'unread': !item.isRead}" @tap="readMessage(item)">
				<view class="message-header">
					<view class="message-title">{{ item.title }}</view>
					<view class="message-time">{{ formatTime(item.createTime) }}</view>
				</view>
				<view class="message-content">{{ item.content }}</view>
				<view class="message-footer">
					<text class="message-type">{{ getMessageType(item.type) }}</text>
					<text v-if="!item.isRead" class="unread-badge"></text>
				</view>
			</view>

			<view v-if="messageList.length === 0" class="empty-tips">
				<text class="empty-text">暂无消息</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				messageList: [{
					content: "欢迎来到叮咚吉派家政阿姨",
					createTime: "2025-03-04 11:05:11",
					id: 1,
					isRead: 0,
					title: "欢迎",
					type: 1,
					userId: 1
				}]
			}
		},
		onLoad() {
			// 页面加载时获取消息列表
			this.getMessageList();
		},
		onPullDownRefresh() {
			this.getMessageList();
		},
		methods: {
			// 获取消息列表
			getMessageList() {
				// 这里应该是从API获取数据
				// 此处使用示例数据
				// this.messageList = [...];

				// 模拟API请求
				uni.showLoading({
					title: '加载中'
				});
				this.$Request.postFormHost(this.$Api.getNoticeList)
					.then(res => {
						this.messageList = res.data;
						uni.hideLoading();
						uni.stopPullDownRefresh();
					});

			},

			// 阅读消息
			readMessage(message) {
				if (message.isRead === 0) {
					const index = this.messageList.findIndex(item => item.id === message.id);
					this.messageList[index].isRead = 1;
					// 这里应该是调用API标记消息为已读
					this.$Request.postFormHost(this.$Api.readNotice, {
							noticeId: message.id
						})
						.then(res => {});
				}

				// 跳转到消息详情页
				uni.navigateTo({
					url: '/pages/mine/noticeDetail' + "?notice=" + JSON.stringify(message)
				});
			},

			// 格式化时间
			formatTime(timeStr) {
				const date = new Date(timeStr.replace(/-/g, '/'));
				const now = new Date();

				// 计算时间差
				const diff = now - date;
				const days = Math.floor(diff / (24 * 60 * 60 * 1000));

				if (days === 0) {
					// 今天
					const hours = date.getHours();
					const minutes = date.getMinutes();
					return `${hours < 10 ? '0' + hours : hours}:${minutes < 10 ? '0' + minutes : minutes}`;
				} else if (days === 1) {
					// 昨天
					return '昨天';
				} else if (days < 7) {
					// 一周内
					const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
					return `周${weekdays[date.getDay()]}`;
				} else {
					// 超过一周
					const month = date.getMonth() + 1;
					const day = date.getDate();
					return `${month}月${day}日`;
				}
			},

			// 获取消息类型
			getMessageType(type) {
				const typeMap = {
					1: '个人消息',
					2: '系统消息',
					3: '订单通知',
					4: '用户消息'
				};

				return typeMap[type] || '其他消息';
			}
		}
	}
</script>

<style>
	.message-center {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 30rpx;
	}

	.page-header {
		width: 100%;
		padding: 20rpx 30rpx;
		background-color: #ffffff;
		border-bottom: 1rpx solid #eaeaea;
		position: fixed;
	}

	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
	}

	.message-list {
		padding: 20rpx;
		/* margin-top: 90rpx; */
		background: linear-gradient(to bottom, #ffffff, #e73c3c);
		min-height: 100vh;
		margin-bottom: 100rpx;
	}

	.message-item {
		background-color: #ffffff;
		border-radius: 12rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.message-item.unread {}

	.message-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.message-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}

	.message-time {
		font-size: 24rpx;
		color: #999999;
	}

	.message-content {
		font-size: 28rpx;
		color: #666666;
		line-height: 1.5;
		margin-bottom: 16rpx;
	}

	.message-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.message-type {
		font-size: 24rpx;
		color: #999999;
		background-color: #f0f0f0;
		padding: 4rpx 12rpx;
		border-radius: 6rpx;
	}

	.unread-badge {
		width: 16rpx;
		height: 16rpx;
		background-color: #ff4d4f;
		border-radius: 50%;
	}

	.empty-tips {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
	}

	.empty-image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 20rpx;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999999;
	}
</style>